<template>
  <Layout class-prefix="money">
    <NavBar :isShowLeftIcon="false" :iconName="``" :navTitle="`记账`"/>
    <div class="content">
      <Tags :value.sync="record.tags"/>
      <div class="notes">
        <FromItem :value.sync="record.notes" field-name="备注" placeholder="在这里输入备注"/>
      </div>
      <div class="createdAt">
        <FromItem type="date"
                  :value.sync="record.createdAt" field-name="日期" placeholder="在这里输入日期"/>
      </div>
      <Tabs class-prefix="type" :value.sync="record.type" :data-source="recordTypeList "/>
      <NumberPad @update:submit="saveRecord"
                 :value.sync="record.amount"
                 @update:inputContent="inputContent"/>
    </div>
  </Layout>
</template>
<script lang="ts">
import Vue from 'vue';
import Tags from '@/components/Money/Tags.vue';
import FromItem from '@/components/Common/FormItem.vue';
import NumberPad from '@/components/Money/NumberPad.vue';
import {Component} from 'vue-property-decorator';
import store from '@/store/index';
import Tabs from '@/components/Common/Tabs.vue';
import recordTypeList from '@/constants/recordTypeList.ts';
import dayjs from 'dayjs';

@Component({
  components: {Tabs, NumberPad, FromItem, Tags},
})
export default class Money extends Vue {
  record: RecordItem = {
    tags: [], notes: '', type: '-', amount: '', createdAt: dayjs(new Date()).format('YYYY-MM-DD')
  };
  recordTypeList = recordTypeList;

  get recordList() {
    return store.state.recordList;
  }

  created() {
    this.$store.dispatch('getRecordList');
  }

  saveRecord() {
    if (this.record.tags.length === 0) return alert('请选择一个标签');
    this.$store.dispatch('saveRecords', this.record);
    this.record = {
      tags: [], notes: '', type: '-', amount: '', createdAt: dayjs(new Date()).format('YYYY-MM-DD')
    };
  }

  inputContent(event: string) {
    if (this.record.amount.length === 16) return;
    if (!this.record.amount) {
      if (event === '0') return;
      if (event === '.') this.record.amount += '0' + event;
    }
    if (this.record.amount.indexOf('.') >= 0 && event === '.') return;
    this.record.amount += event;
  }
}
</script>
<style lang="scss">
.money-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.content {
  overflow-y: auto;
}

.notes {
  padding: 5px 0;
}

::v-deep .type-item {

}
</style>
<style lang="scss" scoped>
</style>
